<h4>{{title}}
    <i ng-show='loading' class='icon-spinner icon-spin'></i>
    <i class='spacing-hack icon-ok'></i>
</h4>
<hr class='settings-separator'>
<table class="table users">
    <thead>
        <tr>
            <th class='users-uid'>
                <input type="checkbox" ng-model="allUsers" ng-click="toggleUsers()" ng-checked="allUsers" value='{{allUsers}}' />
            </th>
            <th class='users-username'>Username</th>
            <th class='users-email'>Email</th>
            <th class='users-twitter'>Twitter</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>
                <input type="checkbox" ng-model="user.checked" ng-click="updateControls(user)" ng-checked="user.checked" value="{{user.id}}" />
            </td>
            <td>{{user.username}}</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr ng-show="!users.length">
            <td ng-click="openAdd()" colspan=3>
                No Users Available. This shouldn't be possible!
            </td>
        </tr>
    </tbody>
</table>
<button class="btn" ng-click="openAdd()" type="button"><i class="icon-plus"></i> Add</button>
<button class="btn" type="button"><i class="icon-edit"></i> Edit</button>
<button class="btn" type="button"><i class="icon-trash"></i> Remove</button>
<div modal="addUserOpen" close="closeAdd()" options="opts">
    <div class="modal-header">
        <h3><i class="icon-plus"></i> Add a User</h3>
    </div>
    <div class="modal-body">
        <form name='form' class='css-form' novalidate>
            <fieldset>
                <label for="">Username</label>
                <input name="username" ng-model="user.name" required type="text" placeholder="Username" />
            </fieldset>
            <fieldset>
                <label for="">Email Address</label>
                <input name="emailAddress" ng-model="user.email" required type="email" placeholder="Email Address" />
            </fieldset>
            <fieldset>
                <label for="">Password</label>
                <input name="password" ng-model="user.password" required type="password" placeholder="Password" />
            </fieldset>
            <fieldset>
                <label for="">Confirm Password</label>
                <input name="passwordConfirm" ng-model="user.confirmPassword" required type="password" placeholder="Confirm Password" />
            </fieldset>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning cancel" ng-click="closeAdd()">Cancel</button>
            <button class="btn btn-success" ng-disabled="form.$invalid || isUnChanged(user)" ng-click="userAdd(user)">Add</button>
        </div>
    </div>
</div>
